Apollo Client

包括的な状態管理ライブラリ

（これを使用することで、ローカルおよびリモートのデータをGraphQLを使って管理することができます。）

Use it to fetch, cache, and modify application data, all while automatically updating your UI.

（アプリケーションのデータを取得、キャッシュ、変更しながら、UIを自動的に更新してくれるという機能を持っています。）

Apollo Client の利用

code:ts

const client = new ApolloClient({

link: authLink.concat(httpLink),

cache: new InMemoryCache(),

});

code:src/App.tsx

function App() {

return (

<ApolloProvider client={client}>

<RouterProvider router={router} />

</ApolloProvider>

);

}

code:jsx

const { loading, error, data } = useQuery(gql`

query GetDogs {

dogs {

id

breed

}

}

`);

code:jsx

mutation IncrementCounter {

currentValue

}

`);

関数コンポーネントの外で処理したい場合

Apollo Link Architecture

Link とは

GraphQL サーバとの HTTP リクエスト・レスポンスのフローを管理・制御するためのインタフェース

https://maku.blog/p/xa62yo4/img-001.drawio.svg

組み込みの Link（一部）

HTTP を介して GraphQL リクエストを送信するための Link

デフォルトで使用される Link

code:js

import { HttpLink } from '@apollo/client';

const link = new HttpLink({

});

エラーのキャッチと処理を行うための Link

code:js

import { onError } from "@apollo/client/link/error";

// Log any GraphQL errors or network error that occurred

const errorLink = onError(({ graphQLErrors, networkError }) => {

if (graphQLErrors)

graphQLErrors.forEach(({ message, locations, path }) =>

console.log(

[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}

)

);

});

ネットワークエラーが発生した際にリクエストを再試行するための Link

code:js

import { RetryLink } from "@apollo/client/link/retry";

const link = new RetryLink();

複数のリクエストを 1 つのバッチにまとめて送信するための Link

code:js

import { BatchHttpLink } from "@apollo/client/link/batch-http";

const link = new BatchHttpLink({

batchMax: 5, // No more than 5 operations per batch

batchInterval: 20 // Wait no more than 20ms after first batched operation

});

カスタム Link を作成することもできる

code:jsx

import { setContext } from '@apollo/client/link/context';

const authLink = setContext((_, { headers }) => {

const token = localStorage.getItem('authToken');

return {

headers: {

...headers,

}

};

});